Working with Font Properties

The font properties allow you to set font-related styles for the text present on an HTML Web page. You can apply the font properties by defining the font-family, font-size, and the style of the text.

Given below lists the available font properties:

Property

Description

font

Defines a shorthand property for font-style, font-variant, font-weight, font-size, line-height, and font-family properties. It sets all these font properties in one declaration; in CSS2, you can also set this property to caption, icon, menu, message-box, small-caption, or status-bar

font-family

Specifies a prioritized list of font family names and/or generic family names for an element. Generic families refer to the font characteristics the browser should try to match, such as serif or monospace.

font-size

Specifies the size of a font. You can set this property to xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, or specify it in the form of a length or percentage value.

font-stretch

Specifies a normal, condensed, or extended font face. You can set this property to normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, or ultra-expanded.

font-style

Specifies the style of the font. You can set this property to normal, italic, or oblique.

font-variant

Specifies whether or not a font is a small-caps font. You can set this property to either normal or small-caps.

font-weight

Specifies the weight of the font. You can set this property to normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 or 900.

Let’s now learn how to work with the font properties, including font-family, font-size, font-style, and font-weight.